<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>${pageInfo.title!}</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/begtable.css" />

    <style>
        .layui-form-item{
            padding: 5px 4px;
            margin-bottom: 0px;
        }
        .layui-elem-quote{
            padding:5px;
        }
        .beg-table-box {
            position: inherit;
            /* height: 100%; */
            width: 100%;
            /* max-width: 100%; */
        }
        .beg-table-body {
            overflow-x: scroll;
            /* width: 2000px; */
            max-height: 100%;
            width: 100%;
        }
        .beg-table {
            /* width: 100%; */
            /* max-width: 100%; */
            height: 100%;
            margin-bottom: 0px;
        }
        td,th{white-space: nowrap; }
        td{font-size:13px;}
    </style>
</head>

<body>
<div class="admin-main">

    <form class="layui-form" action="/page.htm?id=${id!}" id="searchForm" method="post">
        <input type="hidden" name="page" id="currentPage" value="${page!}"/>
        <input type="hidden" name="row" id="row" value="15"/>
        <#if rowid??>
            <input type="hidden" name="rowid" id="row" value="${rowid!}"/>
        </#if>
        <div class="layui-form-item">
    <#if pageInfo.params??>
              <#list pageInfo.params as pa>
                  <label class="layui-form-label">${pa.fieldText!}</label>
                  <div class="layui-input-inline">
                      <#if pa.ptype.value==1>
                          <input type="text" name="${pa.field!}" id="${pa.field!}_id" autocomplete="off" class="layui-input" value="${pa.defaultValue!}">
                        <#elseif pa.ptype.value==2>
                            <select name="${pa.field!}" id="${pa.field!}_id" >
                                <#if pa.options??>
                                    <#list pa.options as op>
                                        <option value="${op.value!}" <#if op.hasSelect>selected</#if> >${op.text}</option>
                                    </#list>
                                </#if>
                            </select>
                          <#elseif pa.ptype.value=3>
                          <input class="layui-input" placeholder="日期选择" name="${pa.field!}" id="${pa.field!}_id" value="${pa.defaultValue!}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                      </#if>
                  </div>
              </#list>
    </#if>
        </div>
    </form>

    <blockquote class="layui-elem-quote">
<#if pageInfo.params??>
        <a href="javascript:;" class="layui-btn layui-btn-small" id="search">
            <i class="layui-icon">&#xe615;</i> 搜索
        </a>
</#if>
        <#if pageInfo.pageFunctions??>
            <#list pageInfo.pageFunctions as fun>
                <a href="javascript:fun_${fun.functionId}();" class="layui-btn layui-btn-small" id="fun${fun.functionId}">
                    <i class="layui-icon">&#xe615;</i> ${fun.title}
                </a>
            </#list>
        </#if>
    </blockquote>

    <div id="xx" style="width:100%; border: 1px solid #DDDDDD;">
        <div style="width: 100%; border: 1px solid #009688;" class="tablediv">
            <div class="beg-table-box">
                <div class="beg-table-body">
                    <table class="beg-table beg-table-bordered beg-table-striped beg-table-hovered">
                        <thead >
                        <tr>
                            <#if pageInfo.fieldTitles??>
                                <#list pageInfo.fieldTitles as title>
                                    <th>${title!}</th>
                                </#list>
                            </#if>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#list SQL0 as sql>
                        <tr>
                            <#list pageInfo.fieldVariables as field>
                            <td>${sql[field]!}</td>
                            </#list>
                            <td><!--行方法-->
                                <#if pageInfo.rowFunctions??>
                                    <#list pageInfo.rowFunctions as fun>
                                        <button type="button" class="layui-btn layui-btn-mini" onclick="rowFun_${fun.functionId}('${sql[pageInfo.fieldVariables[0]]}');">${fun.title}</button>
                                    </#list>
                                </#if>
                            </td>
                        </tr>
                        </#list>
                        </tbody>
                    </table>
                </div>
                <div class="beg-table-paged" ></div>
            </div>
        </div>
    </div>

    <hr>



</div>
<script type="text/javascript" src="/js/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/plugins/layer/layer.js"></script>
<script type="text/javascript" src="/js/custom_common.js"></script>

<script>

    $(function(){
        var ua = navigator.userAgent.toLowerCase();
        if(/iphone|ipad/.test(ua)) {
            $(".admin-main").width("55%")
            $(".admin-main").minWidth("400px");
        }
    })
    function search(){
        $("#currentPage").val(1);
        $("#searchForm").submit();
    }

    layui.config({
        base: '/js/'
    });

    layui.use(['begtable'], function() {
        var begtable = layui.begtable(),
                layer = layui.layer,
                $ = layui.jquery,
                laypage = layui.laypage;
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
        });

        var totalPage = '${totalPages!}';
        var currentPage = '${page!}';

        laypage({
            cont: $('.beg-table-paged'),
            curr:parseInt(currentPage),
            pages: parseInt(totalPage),
            groups: 10,
            jump: function(obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr;
                if(!first) {
                    $("#currentPage").val(parseInt(curr));
                    $("#searchForm").submit();
                }else{
                    layer.msg('第 '+ obj.curr +' 页');
                }
            }
        });
        $("#xx").height($(window).height()-310);


        $('#search').on('click', function() {
            search();
        });


        $('.site-table tbody tr').on('click', function(event) {
            var $this = $(this);
            var $input = $this.children('td').eq(0).find('input');
            $input.on('ifChecked', function(e) {
                $this.css('background-color', '#EEEEEE');
            });
            $input.on('ifUnchecked', function(e) {
                $this.removeAttr('style');
            });
            $input.iCheck('toggle');
        }).find('input').each(function() {
            var $this = $(this);
            $this.on('ifChecked', function(e) {
                $this.parents('tr').css('background-color', '#EEEEEE');
            });
            $this.on('ifUnchecked', function(e) {
                $this.parents('tr').removeAttr('style');
            });
        });
        $('#selected-all').on('ifChanged', function(event) {
            var $input = $('.site-table tbody tr td').find('input');
            $input.iCheck(event.currentTarget.checked ? 'check' : 'uncheck');
        });
    });

    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form(),
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;

    });
    $(".beg-table-box").height($(window).height() - 180);
    $(window).on('resize', function(){
        $(".beg-table-box").height($(window).height() - 180);
    });

    //页面方法
    <#if pageInfo.pageFunctions??>
        <#list pageInfo.pageFunctions as fun>
        function fun_${fun.functionId}(){
            <#if fun.type == 1>
                //弹窗
                layer.open({
                    type: 2,
                    title:false,
                    shadeClose: false,
                    shade: [0.3, '#000'],
                    maxmin: true, //开启最大化最小化按钮
                    //offset: '100px',
                    area: ['900px' , '400px'],
                    content: "${fun.redirectTo}"<#if rowid??>+"&rowid=${rowid}"</#if>
                });
            <#else>
                //js
            ${fun.jsScript!}
            </#if>
        }
        </#list>
    </#if>

    //行方法
    <#if pageInfo.rowFunctions??>
        <#list pageInfo.rowFunctions as fun>
        function rowFun_${fun.functionId}(id){
            <#if fun.type == 1>
                //弹窗
                layer.open({
                    type: 2,
                    title:false,
                    shadeClose: false,
                    shade: [0.3, '#000'],
                    maxmin: true, //开启最大化最小化按钮
                    //offset: '100px',
                    area: ['900px' , '400px'],
                    content: "${fun.redirectTo}&rowid="+id
                });
            <#else>
                //js
            ${fun.jsScript!}
            </#if>
        }
        </#list>
    </#if>

</script>
</body>
<#--<style>-->
    <#--.layui-form-item{-->
        <#--padding: 5px 4px;-->
        <#--margin-bottom: 0;-->
        <#--clear: both;-->
        <#--*zoom: 1;-->
    <#--}-->
    <#--.layui-elem-quote{-->
        <#--padding:5px;-->
    <#--}-->
    <#--.beg-table-box {-->
        <#--position: inherit;-->
    <#--}-->
    <#--.beg-table-body {-->
        <#--overflow-x: scroll;-->
        <#--max-height: 100%;-->
        <#--width: 80%;-->
    <#--}-->
    <#--.beg-table {-->
        <#--height: 100%;-->
        <#--margin-bottom:0px;-->
    <#--}-->
    <#--td,th{white-space: nowrap; }-->
    <#--td{font-size:13px;text-align: center;}-->
<#--</style>-->

</html>